<script>

var source = {
	url: '<?php echo base_url(); ?>room/loadRateAjax/',
	type: 'POST',
	data: {
		rate_type_id: $('#rate-type').val(),
		room_type_id: $('#room-type').val()
	}
};

var rp = {aSep: '.',aDec: ',',vMin: '0.00',vMax: '999999999999.99'};

    $(document).ready(function() {
        $('#calendar').fullCalendar({
            eventSources: [
                source
            ],
            dayClick: function(date) {
                var date2 = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
                var todaysEvents = $('#calendar').fullCalendar('clientEvents', function(event) {
                    return event.start >= date && event.start < date2;
                });

				$('#modalAdd').modal('show');
				//$('#rate_type').val(rate_type);
				$('#tanggal').val($.fullCalendar.formatDate(date, "yyyy-MM-dd"));
				if($('#rate-type').val() != 0) $('#rate-type1').val($('#rate-type').val());
				if($('#room-type').val() != 0) $('#room-type1').val($('#room-type').val());
            },
            eventClick: function(event) {
                $('#modalEdit').modal('show');
                $('#room_rate').val(event.id);
                $('#tanggal2').val($.fullCalendar.formatDate(event.start, "yyyy-MM-dd"));
                $('#price2').autoNumeric('set', event.price);
                $('#room-type2').val(event.room_type_id);
                $('#rate-type2').val(event.rate_type_id);
            }

        });
		
		$('.rp').autoNumeric('init',rp);

    });

    function loadCal() {
        //$('#subhead').html('Room ' + rot + ' - ' + rat);
        $('#calendar').fullCalendar( 'removeEventSource', source).fullCalendar( 'refetchEvents' );
        $('#calendar').fullCalendar( 'addEventSource',  {
			url: '<?php echo base_url(); ?>room/loadRateAjax/',
			type: 'POST',
			data: {
				rate_type_id: $('#rate-type').val(),
				room_type_id: $('#room-type').val()
			}
		   
		});
    }

    function addRoomRate() {
        $.post("<?php echo base_url(); ?>room/addRateAjax", {
            date: $('#tanggal').val(),
            room_type: $('#room-type1').val(),
            rate_type: $('#rate-type1').val(),
            price: $('#price').autoNumeric('get')
        }, function() {
            $('#modalAdd').modal('hide');
            $('#calendar').fullCalendar('refetchEvents');
        });

    }

    function editRoomRate() {
        $.post("<?php echo base_url(); ?>room/editRateAjax", {
            id: $('#room_rate').val(),
			room_type: $('#room-type2').val(),
            rate_type: $('#rate-type2').val(),
            price: $('#price2').autoNumeric('get')
        }, function() {
            $('#modalEdit').modal('hide');
            $('#calendar').fullCalendar('refetchEvents');
        });

    }

    function delRoomRate() {
        $.post("<?php echo base_url(); ?>room/delRateAjax", {
            id: $('#room_rate').val()
        }, function() {
            $('#modalEdit').modal('hide');
            $('#calendar').fullCalendar('refetchEvents');
        });
    }
</script>




<div class="form-horizontal">
	<?php
		echo '<div class="control-group">';
		echo '<label class="control-label" for="rate-type">Rate Type</label>';
		echo '<div class="controls"><select id="rate-type" onchange="loadCal()">';
		if (count($rate_type)!=0) echo '<option value="0">-- All Rate Type --</option>';
		foreach($rate_type as $row){
			echo '<option value="'.$row['rate_type_id'].'">'.$row['rate_type_name'].'</option>';
		}
		echo '</select></div></div>';
		echo '<div class="control-group">';
		echo '<label class="control-label" for="room-type">Room Type</label>';
		echo '<div class="controls"><select id="room-type" onchange="loadCal()">';
		if (count($room_type)!=0) echo '<option value="0">-- All Room Type --</option>';
		foreach($room_type as $row){
			echo '<option value="'.$row['room_type_id'].'">'.$row['room_type_name'].'</option>';
		}
		echo '</select></div></div>';
	?>
</div>

<p id="subhead"></p>
<div id="calendar"></div>

<div id="modalAdd" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="myModalLabel">Add Price Rate</h3>
    </div>
    <div class="modal-body">
        <div class="form-horizontal">
			<div class="control-group">
				<label class="control-label" for="tanggal">Date</label>
				<div class="controls">
					<input type="text" id="tanggal" name="room_rate_date" disabled/>
				</div>
			</div>
			<?php
				echo '<div class="control-group">';
				echo '<label class="control-label" for="rate-type1">Rate Type</label>';
				echo '<div class="controls"><select id="rate-type1" onchange="loadCal()">';
				foreach($rate_type as $row){
					echo '<option value="'.$row['rate_type_id'].'">'.$row['rate_type_name'].'</option>';
				}
				echo '</select></div></div>';
				echo '<div class="control-group">';
				echo '<label class="control-label" for="room-type1">Room Type</label>';
				echo '<div class="controls"><select id="room-type1" onchange="loadCal()">';
				foreach($room_type as $row){
					echo '<option value="'.$row['room_type_id'].'">'.$row['room_type_name'].'</option>';
				}
				echo '</select></div></div>';
			?>
			<div class="control-group">
				<label class="control-label" for="price">Price</label>
				<div class="controls">
					<div class="input-prepend">
						<span class="add-on">Rp</span>
						<input class="span12 rp" type="text" id="price" name="room_rate_price" style="text-align:right;">
					</div>
				</div>
			</div>
		</div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <a href="javascript:void(0)" class="btn btn-primary" onclick="addRoomRate();">Add</a>
        </div>
    </div>
</div>

<div id="modalEdit" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="myModalLabel">Edit Price Rate</h3>
    </div>
    <div class="modal-body">
		<div class="form-horizontal">
			<div class="control-group">
				<label class="control-label" for="tanggal2">Date</label>
				<div class="controls">
					<input type="text" id="tanggal2" name="room_rate_date" disabled/>
				</div>
			</div>
			<?php
				echo '<div class="control-group">';
				echo '<label class="control-label" for="rate-type2">Rate Type</label>';
				echo '<div class="controls"><select id="rate-type2" onchange="loadCal()">';
				foreach($rate_type as $row){
					echo '<option value="'.$row['rate_type_id'].'">'.$row['rate_type_name'].'</option>';
				}
				echo '</select></div></div>';
				echo '<div class="control-group">';
				echo '<label class="control-label" for="room-type2">Room Type</label>';
				echo '<div class="controls"><select id="room-type2" onchange="loadCal()">';
				foreach($room_type as $row){
					echo '<option value="'.$row['room_type_id'].'">'.$row['room_type_name'].'</option>';
				}
				echo '</select></div></div>';
			?>
			<div class="control-group">
				<label class="control-label" for="price2">Price</label>
				<div class="controls">
					<div class="input-prepend">
						<span class="add-on">Rp</span>
						<input class="span12 rp" type="text" id="price2" name="room_rate_price" style="text-align:right;">
					</div>
				</div>
			</div>
		</div>
        <input type="hidden" id="room_rate" name="rate_type_id" value="" />
        <div class="modal-footer">
            <a href="javascript:void(0)" class="pull-left btn btn-danger" onclick="delRoomRate();">Delete</a>
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <a href="javascript:void(0)" class="btn btn-primary" onclick="editRoomRate();">Save Changes</a>
        </div>
    </div>
</div>